<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import _ from 'lodash'
import router from '@/router'
import { useRoute } from 'vue-router'
/* 搜索框组件 */
import SearchInput from '@/components/SearchInput'
/* 欢迎页 */
import Welcome from '@/components/Welcome'
/* 会话列表组件 */
import ConversationList from './components/ConversationList.vue'
import ConversationListH5 from './components/ConversationListH5.vue'
// 判断设备类型
import isPhone from '@/utils/isPhone'
const store = useStore()
const isShow = computed(() => {
    const route = useRoute()
    console.log(route.fullPath,'当前路由')
    if(route.fullPath!='/conversation')return false
    return true
})
const conversationList = computed(() => {
    return _.values(store.state.Conversation.conversationListData)
})

//路由跳转-系统通知
const toInformDetails = () => {
    router.push('/conversation/informdetails')
    
}

//路由跳转-对应好友会话
const toChatMessage = (id, chatType) => {
    console.log('>>>>>>>id', id)
    router.push({
        path: '/conversation/message',
        query: {
            id,
            chatType
        }
    })
}
</script>
<template>
  <el-container v-if="isPhone" class="chat_conversation_list_h5 fill_div ">
    <ConversationListH5 @toInformDetails="toInformDetails" @toChatMessage="toChatMessage" v-if="isShow" />
     <router-view></router-view>
  </el-container>
  <el-container class="fill_height" v-else>
    <el-aside class="chat_converation_box">
      <!-- 搜索组件 -->
      <SearchInput :searchType="'conversation'" :searchData="conversationList" @toChatMessage="toChatMessage" />
      <div class="chat_conversation_list">
        <ConversationList @toInformDetails="toInformDetails" @toChatMessage="toChatMessage" />
      </div>
    </el-aside>
    <el-main class="chat_converation_main_box flow_hidden">
      <router-view></router-view>
      <Welcome />
    </el-main>
  </el-container>
</template>

<style lang="scss" scoped>
.chat_conversation_list_h5 {
}
.chat_converation_box {
    position: relative;
    background: #cfdbf171;
    overflow: hidden;
    min-width: 154px;

    .chat_conversation_list {
        height: calc(100% - 60px);
    }
}

.chat_converation_main_box {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
}
</style>
